<template>
	<view :data-theme="theme()" :class="theme()">
		<view class="picker-mask" v-if="showPicker">
			<swiper class="picker-swiper" touchable="true" :autoplay="false" @change="changePicker"
				previous-margin="80rpx" next-margin="80rpx" :current="currentPicker">
				<swiper-item class="picker-item" v-for="(img, idx) in pickerList" :key="idx">
					<image :src="img.image" class="picker-img" :class="{ active: idx === currentPicker }"
						mode="aspectFill" />
				</swiper-item>
			</swiper>
			<button class="confirm-btn" @click="confirmPicker">生成图片分享</button>
		</view>
		<view v-else class="qrcodes d-c-c d-c">
			<view class="closes" @click="closed"><text class="icon iconfont icon-guanbi1"></text></view>
			<image :src="selectedImage" class="single-img" mode="aspectFit" @click="gotoPage(selectedLink)" />
			<view class="btns-wrap d-c-c">
				<!-- #ifdef MP || APP-PLUS -->
				<view class="d-c d-b-c" @click="savePosterImg">
					<view class="f24 confirm-btn">保存图片</view>
				</view>
				<!-- #endif  -->
				<!-- #ifdef H5 -->
				<button class="confirm-btn">长按保存图片</button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				pickerList: [],
				// 弹层 swiper 当前选中的索引
				currentPicker: 0,
				// 选中后要显示的图片 URL
				selectedImage: "",
				// 选中后跳转链接（如无可留空）
				selectedLink: "",
				// 控制弹层显示
				showPicker: true,
				/*是否生成图片*/
				isCreatedImg: false,
			};
		},
		mounted() {
			/*获取数据*/
			this.getDatas();
		},
		methods: {
			//关闭分享
			saveImg() {
				this.isCreatedImg = true;
			},
			//关闭生成图片
			hidePopupFunc() {
				this.isCreatedImg = false;
			},
			closed() {
				this.showPicker = true;
			},
			getDatas() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				let source = self.getPlatform();
				self._get(
					'plus/agent/qrcode/list', {
						source: source
					},
					function(data) {
						uni.hideLoading();
						self.pickerList = data.data.list;
						if (self.pickerList.length == 0) {
							uni.showModal({
								title: '提示',
								content: '请联系管理员添加海报',
								showCancel: false,
								success: function(res) {
									self.navigateBack();
								}
							})
						}
					}
				);
			},
			confirmPicker() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				let source = self.getPlatform();
				let posterId = this.pickerList[this.currentPicker].posterId;
				self._get(
					'plus/agent/qrcode/poster', {
						source: source,
						posterId: posterId,
					},
					function(data) {
						uni.hideLoading();
						self.selectedImage = data.data;

						self.showPicker = false;
					}
				);
			},
			changePicker(e) {
				this.currentPicker = e.detail.current;
			},
			gotoPage(url) {
				if (url) {
					uni.navigateTo({
						url
					});
				}
			},
			savePosterImg() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				// 下载海报图片
				uni.downloadFile({
					url: self.selectedImage,
					success(res) {
						uni.hideLoading();
						// 图片保存到本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(data) {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
								// 关闭商品海报
								self.isCreatedImg = false;
							},
							fail(err) {
								console.log(err.errMsg);
								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showToast({
										title: '请允许访问相册后重试',
										icon: 'none',
										duration: 1000
									});
									setTimeout(() => {
										uni.openSetting();
									}, 1000);
								}
							},
							complete(res) {
								console.log('complete');
							}
						});
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	/* 弹层遮罩 */
	.picker-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 50rpx;
	}

	/* 弹层 swiper */
	.picker-swiper {
		width: 100%;
		height: 1068rpx;
		margin-bottom: 40rpx;
		/* 让超出的左右项可见 */
		overflow: visible;
	}

	.picker-item {
		/* 给每项加圆角和裁切 */
		border-radius: 20rpx;
		overflow: hidden;
		height: 1068rpx;
		/* 水平间距，这里左右各 10rpx，间隔总共 20rpx */
		margin: 0 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.picker-item-cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		/* 背景透明，无需设置 background */
	}

	.picker-img {
		width: 538rpx;
		height: 946rpx;
		/* 取消图片自身的圆角，容器已经裁切了 */
		border-radius: 0;
		border-radius: 20rpx;
		transform: scale(1);
		transition: transform 300ms linear;
	}

	.picker-img.active {
		/* 放大，并加白色描边（可选） */
		transform: scale(1.15);


	}

	/* 确定按钮 */
	.confirm-btn {
		width: 512rpx;
		height: 68rpx;
		background: linear-gradient(0deg, #FFDCA2 0%, #FDC57A 100%);
		border-radius: 44rpx;
		line-height: 68rpx;
		text-align: center;
		color: #5A3713;
	}

	/* 主界面静态图 */
	.single-img {
		width: 538rpx;
		height: 946rpx;
		border-radius: 20rpx;
		margin: 60rpx auto 0;
	}

	/* 按钮区同原来 */
	.btns-wrap {
		margin-top: 34rpx;

		.icon-buttn {
			width: 98rpx;
			height: 98rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 48rpx;
			margin-bottom: 28rpx;
		}
	}

	.qrcodes {
		position: relative;
	}

	.closes {
		position: absolute;
		top: 50rpx;
		right: 80rpx;
	}
</style>